<template>
  <div class="table-box">
    <ProTable ref="proTable" title="菜单列表" row-key="menuId" :columns="columns" :data="menuData">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="insertDialogVisible = true">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #menuIcon="scope">
        <el-icon :size="18">
          <component :is="scope.row.menuIcon"></component>
        </el-icon>
      </template>
      <template #createDate="scope">
        {{ scope.row.createDate.replace("T", " ").split(".")[0] }}
      </template>
      <template #updateDate="scope">
        {{ scope.row.updateDate.replace("T", " ").split(".")[0] }}
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openUpdateDialog(scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete"> 删除 </el-button>
      </template>
    </ProTable>
    <!-- 新增对话框 -->
    <el-dialog width="35%" title="新增菜单" v-model="insertDialogVisible">
      <el-form ref="insertFormRef" :model="insertParam" :rules="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="父级菜单" prop="parentMenuId">
          <el-tree-select :data="menuTreeList" v-model="insertParam.parentMenuId" check-strictly :default-expand-all="true" />
        </el-form-item>
        <el-form-item label="菜单标题" prop="menuTitle">
          <el-input v-model="insertParam.menuTitle" />
        </el-form-item>
        <el-form-item label="菜单Name" prop="menuName">
          <el-input v-model="insertParam.menuName" />
        </el-form-item>
        <el-form-item label="菜单图标">
          <SelectIcon v-model:icon-value="insertParam.menuIcon"></SelectIcon>
        </el-form-item>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="路由地址">
              <el-input v-model="insertParam.menuPath"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序号码">
              <el-input-number v-model="insertParam.orderNum"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="重定向地址">
          <el-input v-model="insertParam.redirectUrl"></el-input>
        </el-form-item>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="insertParam.status">
                <el-radio :label="0">禁用</el-radio>
                <el-radio :label="1">正常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否外链">
              <el-radio-group v-model="insertParam.isLink">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="是否全屏">
              <el-radio-group v-model="insertParam.isFull">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否固定">
              <el-radio-group v-model="insertParam.isAffix">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="是否隐藏">
              <el-radio-group v-model="insertParam.isHide">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存">
              <el-radio-group v-model="insertParam.isKeepAlive">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="insertParam.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="insertDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="insertMenu(insertFormRef)">新增</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog width="35%" title="修改菜单信息" v-model="updateDialogVisible">
      <el-form ref="updateFormRef" :model="updateParam" :rules="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="父级菜单" prop="parentMenuId">
          <el-tree-select :data="menuTreeList" v-model="updateParam.parentMenuId" check-strictly :default-expand-all="true" />
        </el-form-item>
        <el-form-item label="菜单标题" prop="menuTitle">
          <el-input v-model="updateParam.menuTitle" />
        </el-form-item>
        <el-form-item label="菜单Name" prop="menuName">
          <el-input v-model="updateParam.menuName" />
        </el-form-item>
        <el-form-item label="菜单图标">
          <SelectIcon v-model:icon-value="updateParam.menuIcon"></SelectIcon>
        </el-form-item>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="路由地址">
              <el-input v-model="updateParam.menuPath"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序号码">
              <el-input-number v-model="updateParam.orderNum"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="重定向地址">
          <el-input v-model="updateParam.redirectUrl"></el-input>
        </el-form-item>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="updateParam.status">
                <el-radio :label="0">禁用</el-radio>
                <el-radio :label="1">正常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否外链">
              <el-radio-group v-model="updateParam.isLink">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="是否全屏">
              <el-radio-group v-model="updateParam.isFull">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否固定">
              <el-radio-group v-model="updateParam.isAffix">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="是否隐藏">
              <el-radio-group v-model="updateParam.isHide">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存">
              <el-radio-group v-model="updateParam.isKeepAlive">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="updateParam.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateMenu(updateFormRef)">修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { ref, reactive, onMounted } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import authMenuList from "@/assets/json/authMenuList.json";
import ProTable from "@/components/ProTable/index.vue";
import { CreateMenuParam, EditMenuInfoParam, GetMenuListParam, MenuTreeResult } from "@/api/interface/auth/menu";
import SelectIcon from "@/components/SelectIcon/index.vue";
import { createMenu, editMenuInfo, getMenuList, getMenuTree } from "@/api/modules/auth/menu";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { statusEnum, statusFieldNames } from "@/enums/httpEnum";
import { SelectTreeOptionResult } from "@/api/interface";

const proTable = ref();

const insertDialogVisible = ref(false);

const updateDialogVisible = ref(false);

const insertFormRef = ref<FormInstance>();

const updateFormRef = ref<FormInstance>();

let menuData = ref<MenuTreeResult[]>([]);

let menuTreeList = ref<SelectTreeOptionResult[]>([]);

const queryParam = reactive<GetMenuListParam>({
  menuTitle: "",
  status: undefined
});

const initInsertParam = {
  parentMenuId: "",
  menuTitle: "",
  menuIcon: "",
  menuName: "",
  menuPath: "",
  orderNum: 0,
  status: 1,
  remark: "",
  isLink: 0,
  isHide: 0,
  isAffix: 0,
  isFull: 0,
  isKeepAlive: 0
};

/**. 新增参数 */
const insertParam = reactive<CreateMenuParam>({
  parentMenuId: "",
  menuTitle: "",
  menuIcon: "",
  menuName: "",
  menuPath: "",
  orderNum: 0,
  status: 1,
  remark: "",
  isLink: 0,
  isHide: 0,
  isAffix: 0,
  isFull: 0,
  isKeepAlive: 0
});

/** 修改参数 */
const updateParam = reactive<EditMenuInfoParam>({
  menuId: "",
  parentMenuId: "",
  menuTitle: "",
  menuIcon: "",
  menuName: "",
  menuPath: "",
  orderNum: 0,
  status: 1,
  remark: "",
  isLink: 0,
  isHide: 0,
  isAffix: 0,
  isFull: 0,
  isKeepAlive: 0
});

const ruleForm = reactive<FormRules>({
  parentMenuId: [{ required: true, message: "请选择上一级菜单", trigger: "blur" }],
  menuTitle: [{ required: true, message: "请输入菜单标题", trigger: "blur" }],
  menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  orderNum: [{ required: true, message: "请输入排序号码", trigger: "blur" }]
});

const columns = reactive<ColumnProps<MenuTreeResult>[]>([
  { type: "index", label: "", width: 80 },
  {
    prop: "menuTitle",
    label: "菜单标题",
    search: { el: "input", tooltip: "请输入菜单标题" }
  },

  {
    prop: "menuIcon",
    label: "菜单图标"
  },
  {
    prop: "menuPath",
    label: "菜单路由"
  },
  {
    prop: "status",
    label: "状态",
    tag: true,
    enum: statusEnum,
    search: { el: "select", props: { filterable: true } },
    fieldNames: statusFieldNames
  },
  {
    prop: "createDate",
    label: "创建时间",
    width: 200
  },
  {
    prop: "updateDate",
    label: "修改时间",
    width: 200
  },
  { prop: "operation", label: "操作", fixed: "right", width: 330 }
]);

onMounted(async () => {
  await initMenuTree();

  await getMenuTable();
});

/** 初始化菜单树形下拉框数据 */
const initMenuTree = async () => {
  const { data } = await getMenuTree();
  menuTreeList.value = [{ label: "海讯", value: "0", parentValue: "0", children: [...data] }];
};

/** 初始化菜单表格数据 */
const getMenuTable = async () => {
  const { data } = await getMenuList({ menuTitle: "", status: undefined });
  menuData.value = [...data];
};
/** 新增菜单 */
const insertMenu = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await createMenu(insertParam);
      ElMessage.success("新增菜单");
      insertDialogVisible.value = false;
      await getMenuTable();
      Object.assign(insertParam, initInsertParam);
    } else {
      ElMessage.error("请填入必填数据");
    }
  });
};

/** 打开编辑对话框 */
const openUpdateDialog = (param: MenuTreeResult) => {
  updateDialogVisible.value = true;
  Object.assign(updateParam, param);
};

/** 修改菜单 */
const updateMenu = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await editMenuInfo(updateParam);

      updateDialogVisible.value = false;
      ElMessage.success("修改成功");
      await getMenuTable();
      await initMenuTree();
    } else {
      ElMessage.error("请填入必填数据");
    }
  });
};
</script>
